import { Component, For } from 'solid-js';
import { HomeListApp } from '@/types/home';
import AppCard from '../AppCard';
import { Skeleton } from "@/components/ui/skeleton";

interface HomeListAppsProps {
  title: string;
  apps: HomeListApp[];
  loading: boolean;
  category?: string;
}

const HomeListApps: Component<HomeListAppsProps> = (props) => {
  return (
    <div class="mb-2 mt-2">
      <div class="mb-2">
        {props.loading ? (
          <Skeleton height={30} width={120} />
        ) : (
          <h2 class="text-2xl font-bold">{props.title}</h2>
        )}
      </div>
      <div class="grid auto-rows-auto grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 pb-6">
        {props.loading ? (
          <For each={Array(8).fill(0)}>
            {() => (
              <div class="p-4 rounded-lg border border-border/40 bg-card hover:border-primary/50 transition-colors">
                <div class="flex items-start gap-3">
                  <div class="w-12 h-12 rounded-lg bg-muted flex items-center justify-center overflow-hidden">
                    <Skeleton class="w-full h-full" />
                  </div>
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between gap-2">
                      <Skeleton class="h-5 w-24" />
                    </div>
                    <div class="mt-1">
                      <Skeleton class="h-4 w-full mt-2" />
                      <Skeleton class="h-4 w-3/4 mt-2" />
                    </div>
                  </div>
                </div>
              </div>
            )}
          </For>
        ) : (
          <For each={props.apps}>
            {(app) => (
              <AppCard
                category={props.category || app.Category || ''}
                pkgname={app.Pkgname}
                name={app.Name}
                description={app.More}
                icon={app.Icon}
              />
            )}
          </For>
        )}
      </div>
    </div>
  );
};

export default HomeListApps;